<template>
  <div class="lwq-alert-demo">
      <lwq-alert title="成功提示的文案" type="success"></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info"></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning"></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger"></lwq-alert>
      <hr>
      <lwq-alert title="成功提示的文案" type="success" effect="dark"></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info" effect="dark"></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning" effect="dark"></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger" effect="dark"></lwq-alert>
      <hr>
      <lwq-alert title="不可关闭的 alert" type="success" :closable="false"></lwq-alert>
      <lwq-alert title="自定义 close-text" type="info" closeText="知道了"></lwq-alert>
      <lwq-alert title="设置了回调的 alert" type="warning" @closeAlert="hello"></lwq-alert>
      <hr>
      <lwq-alert title="成功提示的文案" type="success" showIcon></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info" showIcon></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning" showIcon></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger" showIcon></lwq-alert>
      <hr>
      <lwq-alert title="成功提示的文案" type="success" showIcon center></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info" showIcon center></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning" showIcon center></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger" showIcon center></lwq-alert>
      <hr>
      <lwq-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger" description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <hr>
      <lwq-alert title="成功提示的文案" type="success" showIcon description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="消息提示的文案" type="info" showIcon description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="警告提示的文案" type="warning" showIcon description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
      <lwq-alert title="错误提示的文案" type="danger" showIcon description="文字说明文字说明文字说明文字说明文字说明文字说明"></lwq-alert>
  </div>
</template>
<script setup lang="ts">
import LwqAlert from './Alert.vue'
defineOptions({
  name: 'LwqAlertDemo'
});
const hello = (e: boolean) => {
  console.log('Hello World!', e);
}
</script>
<style lang="postcss" scoped>
.lwq-alert-demo {
  .lwq-alert {
    margin-bottom: 10px;
  }
}
</style>